<!--
 * @description: 验证码输入框
 * @fileName: UsccInput
 * @author: lhx
 * @date: 2021/11/24-21:23
 * @version: V1.0.0
-->
<template>
  <div class="vue-app-verify-container">
    <div class="vue-app-verify-container-labels">
      <div
        v-for="(word,index) in codeArr"
        :key="index"
        class="vue-app-verify-container-labels-items"
        @keydown="keydown"
      >
        <input
          :id="'tb' + index"
          v-model="codeArr[index]"
          :style="dynamicStyle"
          type="text"
          maxlength="1"
          @keyup="setValue(index)"
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'UsccInput',
  props: {
    length: {
      type: Number,
      default() {
        return 4
      }
    },
    enableWord: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  data() {
    return {
      codeArr: [],
      isNumber: '^[0-9]*$',
      isNumberOrword: '^[A-Za-z0-9]+$',
      isArrowLeft: false,
      keyName: ''
    }
  },
  computed: {
    dynamicStyle() {
      const style = {
        border: 'none',
        outline: 'none',
        width: '20px',
        'line-height': '20px',
        'text-align': 'center',
        'font-size': '20px'
      }
      let styleStr = ''
      for (const key in style) {
        const element = style[key]
        styleStr += key + ':' + element + ';'
      }
      return styleStr
    }
  },
  created() {
    this.initData()
  },
  mounted() {
    // 默认光标定到第一个输入框
    document.getElementById('tb0').focus()
  },
  methods: {
    initData() {
      // 根据props中的length来生成codeArr
      for (let i = 0; i < this.length; i++) {
        this.codeArr.push('')
      }
    },
    keydown(e) {
      var index = parseInt(e.target.id.slice(2))
      var el = e.target
      this.keyName = e.key
      if (e.key === 'Backspace') {
        if (this.codeArr[index].length > 0) {
          this.codeArr[index] = ''
        } else {
          if (el.parentElement.previousElementSibling) {
            el.parentElement.previousElementSibling.lastElementChild.focus()
            this.codeArr[index - 1] = ''
          }
        }
      }
      // else if (e.key === 'ArrowLeft') {
      //   if (el.parentElement.previousElementSibling) {
      //     this.isArrowLeft = true
      //     el.parentElement.previousElementSibling.lastElementChild.focus()
      //   }
      // } else if (e.key === 'ArrowRight') {
      //   if (index != this.length - 1) {
      //     if (el.parentElement.nextElementSibling) {
      //       el.parentElement.nextElementSibling.lastElementChild.focus()
      //     }
      //   }
      // }
    },
    setValue(index) {
      if (this.keyName === 'Backspace' || this.keyName === 'ArrowLeft' || this.keyName === 'ArrowRight') return
      console.log('keyUp')
      this.$forceUpdate()
      // 验证输入
      var reg = null
      if (this.enableWord) {
        reg = new RegExp(this.isNumberOrword)
      } else {
        reg = new RegExp(this.isNumber)
      }
      // 验证输入
      if (reg.test(this.codeArr[index])) {
        if (index === this.length - 1) {
          document.getElementById('tb' + index).blur()
          this.$emit('completed', this.codeArr.join(''))
        } else {
          // 输入一个字母或者数字后,光标移动到下一个输入框 当使用方向键是不作处理
          if (!this.isArrowLeft) this.nextFocus()
        }
      } else {
        this.codeArr[index] = ''
      }
    },
    clearAllCode() {
      this.codeArr = []
      this.initData()
      document.getElementById('tb0').focus()
    },
    nextFocus() {
      const nextOne = this.codeArr.findIndex((value) => value === '')
      if (nextOne !== -1) {
        document.getElementById('tb' + nextOne).focus()
      }
    }
  }
}
</script>
<style lang="css">
.vue-app-verify-container-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.vue-app-verify-container-labels-items {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  margin-left: 2px;
  text-align: center;
  border: solid 1px #ccc;
  border-radius: 6px;
  overflow: hidden;
}
.vue-app-verify-container-labels-items input {
  border: none;
  outline: none;
  width: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 25px;
}
</style>
